<template>
  <Modal v-model="model" title="链接" :mask-closable="false">
    <Input v-model="link" id="link"/>
    <Button 
      type="primary" 
      slot="footer" 
      data-clipboard-target="#link" 
      :data-clipboard-text="link"
      data-clipboard-action="copy" 
      class="btn" 
      @click="onCopy">复制链接</Button>
  </Modal>
</template>
<script>
export default {
  data() {
    return {
      model: false,
      link: ''
    }
  },
  methods: {
    openModal(row) {
      this.link = '/pages/goods/detail/detail?id=' + row.id + '&skuId=' + row.skuId
      this.model = true
    },
    closeModal() {
      this.model = false
    },
    onCopy() {
      let clipboard = new this.$clipboard('.btn')
      clipboard.on('success', e => {
        this.$Message.success('复制成功')
        clipboard.destroy() //使用destroy可以清除缓存
        this.closeModal()
      })
      clipboard.on('error',e => {
        this.$Message.error('复制失败，请手动复制')
        clipboard.destroy()
      })
    }
  }
}
</script>

